<template>
	<el-drawer v-model="visible" size="100%" :show-close="false">
		<template #header="{ close, titleId, titleClass }">
			<span :id="titleId" :class="titleClass">{{ !dataForm.id ? '新增' : '的修改' }}</span>
			<div class="action-bar">
				<!-- <el-button icon="el-icon-refresh" type="text" @click="refresh">刷新</el-button> -->
				<el-button type="primary" :loading="btnSLoading" @click="handleConfirm">保存</el-button>
				<el-button type="primary" :loading="btnDLoading" @click="handleActionSqlTest">测试规则</el-button>
				<el-button class="btnReturn" @click="close">返回</el-button>
			</div>
		</template>
		<el-scrollbar class="layout-scrollbar">
			<div id="data-form" style="width: 100%">
				<el-alert title="属性编辑" type="info" :closable="false" style="background-color: #f7f8fa; color: #1d2129" />
				<el-form ref="dataFormRef" :model="dataForm" label-width="86px" :rules="dataRule" v-loading="formLoading">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="标签名称" prop="bqmc">
								<el-input v-model="dataForm.bqmc" placeholder="请输入标签名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="风险等级" prop="fxdj">
								<el-select v-model="dataForm.fxdj" placeholder="请选择风险等级">
									<el-option :value="'1'" :label="'无风险'"></el-option>
									<el-option :value="'2'" :label="'低风险'"></el-option>
									<el-option :value="'3'" :label="'中风险'"></el-option>
									<el-option :value="'4'" :label="'高风险'"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="标签属性" prop="bqsx">
								<el-input v-model="dataForm.bqsx" placeholder="请输入标签属性" type="textarea" :rows="2"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="生效方式" prop="sxfs">
								<el-radio-group v-model="dataForm.sxfs">
									<el-radio label="2">单次</el-radio>
									<el-radio label="1">长期</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="dataForm.sxfs == '1'">
							<el-form-item label="触发时间" prop="cffs">
								<el-select v-model="dataForm.cffs">
									<el-option value="1" label="每天"></el-option>
									<el-option value="2" label="每小时"></el-option>
									<el-option value="3" label="每周"></el-option>
									<el-option value="4" label="每个月"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="标签对象" prop="bqdxbh">
								<el-select v-model="dataForm.bqdxbh" placeholder="请选择标签对象">
									<el-option value="1" label="患者"></el-option>
									<el-option value="2" label="医生"></el-option>
									<el-option value="3" label="机构"></el-option>
									<el-option value="4" label="科室"></el-option>
									<el-option value="5" label="事件"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="是否落库" prop="sflk">
								<el-radio-group v-model="dataForm.sflk">
									<el-radio label="1">是</el-radio>
									<el-radio label="2">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-alert title="规则维护" type="info" :closable="false" style="background-color: #f7f8fa; color: #1d2129" />
				<rule-service ref="ruleServiceRef"></rule-service>
			</div>
		</el-scrollbar>
	</el-drawer>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import RuleService from './rule-service.vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'

import { getLabelDetail, saveLabel, actionSql } from '@/api/labels-mana/index'

const emit = defineEmits(['refreshList'])

const visible = ref(false)
const dataFormRef = ref()
const formLoading = ref(false)
const dataForm = reactive({
	bqgzlist: [], // 规则一维列表
	sxfs: '', // 生效方式
	sflk: '', // 是否落库
	fxdj: '', //  风险等级
	dtsql: '', // 动态生成sql
	zd: [], // db字段
	bqmc: '', // 标签名称
	bqdxbh: '', // 标签对象编号
	yxbz: '0', // 有效标志
	bqfs: '', // sql生成模式
	yxrqq: '', // 有效日期起始
	bqdjid: '', // 标签分类id
	bqsx: '', // 标签属性
	tablename: [], // 数据库表集合
	dataSource: '', // 数据库id
	funlist: [], // 计算公式列表
	cffs: '1' // 触发方式
})

const btnSLoading = ref(false)
const btnDLoading = ref(false)
const ruleServiceRef = ref()

const dataRule = ref({
	bqmc: { required: true, message: '请输入标签名称', trigger: 'blur' },
	fxdj: { required: true, message: '请选择风险等级', trigger: 'change' },
	sxfs: { required: true, message: '请选择生效方式' },
	sflk: { required: true, message: '请选择是否落库' },
	bqdxbh: {
		required: true,
		message: '请选择标签对象',
		trigger: 'change'
	}
})

const bqbhSelDataList = ref([])

const showInput = () => {}

const init = (id?: any, treeId?: string) => {
	visible.value = true
	dataForm.id = ''
	dataForm.bqdjid = treeId

	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}

	if (id) {
		getCategory(id)
	}

	nextTick(() => {
		ruleServiceRef.value.init()
	})
}

const getCategory = (id: any) => {
	getLabelDetail({ bqid: id }).then(res => {
		Object.assign(dataForm, res.data.bqxm)
		// console.log(dataForm)

		initGzData()
	})
}

const initGzData = () => {
	ruleServiceRef.value.initBqgzFunSql(dataForm.bqgzList, dataForm.funList, dataForm.dtsql, dataForm.tablename, dataForm.zd)
}

const addRuleFirst = () => {}

const handleConfirm = () => {
	dataFormRef.value.validate(valid => {
		if (!valid) {
			btnSLoading.value = false
			return false
		}

		dataForm.bqfs = ruleServiceRef.value.getTabsIndex()
		if (ruleServiceRef.value.getTabsIndex() == '2') {
			dataForm.dtsql = ruleServiceRef.value.getSqlContent()
		}

		dataForm.dataSource = ruleServiceRef.value.RuleServiceDataForm.sqlDataid

		saveLabel(dataForm).then(res => {
			console.log(res)
			if (res.data.bz == 1) {
				ElMessage.success({
					type: 'success',
					message: '保存成功',
					duration: 500,
					onClose: () => {
						visible.value = false
						emit('refreshList')
					}
				})
			} else {
				ElMessage.error(res.data.message)
			}
		})
	})
}

const handleActionSqlTest = () => {
	if (!ruleServiceRef.value.getSqlContent()) {
		ElMessage.warning('SQL内容为空，无法测试')
		return
	}

	actionSql({
		databaseId: ruleServiceRef.value.RuleServiceDataForm.sqlDataid,
		dtsql: ruleServiceRef.value.getSqlContent()
	}).then(res => {
		ElMessage.success('测试成功')
	})
}

defineExpose({
	init
})
</script>

<style lang="scss">
.el-tag + .el-tag {
	margin-left: 16px;
}

#data-form {
	padding: 0;
}

#data-form .el-form {
	margin-top: 10px;
}

.el-drawer__body {
	padding: 0;
}

.action-bar {
	float: right;
}
</style>